<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI图片生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <svg class="logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#00ccff" />
                        <stop offset="100%" stop-color="#0066ff" />
                    </linearGradient>
                </defs>
                <circle cx="100" cy="100" r="90" fill="none" stroke="url(#logoGradient)" stroke-width="8" />
                <circle cx="100" cy="100" r="50" fill="none" stroke="url(#logoGradient)" stroke-width="6" />
                <circle cx="100" cy="100" r="20" fill="url(#logoGradient)" />
                <path d="M100 10 L100 40 M100 160 L100 190 M10 100 L40 100 M160 100 L190 100" stroke="url(#logoGradient)" stroke-width="6" />
                <path d="M30 30 L60 60 M140 140 L170 170 M30 170 L60 140 M140 60 L170 30" stroke="url(#logoGradient)" stroke-width="4" stroke-linecap="round" />
            </svg>
            <div class="title-container">
                <h1>AI图片生成器</h1>
                <div class="powered-by">由MCP高精度图像生成服务提供技术支持</div>
            </div>
        </div>
        <div class="input-section">
            <textarea id="prompt" placeholder="请描述您想要生成的图片内容..."></textarea>
            <div class="note">
                <p><strong>备注说明：</strong>本网站使用MCP高精度图像生成服务，通过先进的AI技术分析您的描述并创建精准图像。MCP服务集成了多种AI模型，能够理解复杂的语义关系，为获得最佳效果，请提供详细、具体的描述，并选择合适的风格。</p>
            </div>
            <div class="options">
                <div class="option-group">
                    <label for="style">风格:</label>
                    <select id="style">
                        <option value="realistic">写实风格</option>
                        <option value="cartoon">卡通风格</option>
                        <option value="abstract">抽象艺术</option>
                        <option value="digital">数字艺术</option>
                        <option value="oil">油画风格</option>
                    </select>
                </div>
                <div class="option-group">
                    <label for="size">尺寸:</label>
                    <select id="size">
                        <option value="small">小 (512x512)</option>
                        <option value="medium" selected>中 (1024x1024)</option>
                        <option value="large">大 (2048x2048)</option>
                    </select>
                </div>
                <div class="option-group">
                    <label for="relevance">相关度:</label>
                    <select id="relevance">
                        <option value="high" selected>高 (严格匹配描述)</option>
                        <option value="medium">中 (适度发挥)</option>
                        <option value="low">低 (创意发挥)</option>
                    </select>
                </div>
            </div>
            <button id="generate-btn">生成图片</button>
        </div>
        <div class="result-section">
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在生成图片，请稍候...</p>
            </div>
            <div class="image-container" id="image-container">
                <!-- 图片将在这里显示 -->
            </div>
        </div>
        <div class="history-section">
            <h2>历史记录</h2>
            <div class="history-container" id="history-container">
                <!-- 历史记录将在这里显示 -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>